<template>
    <div>
        <el-container>
            <!-- 侧边框 -->
            <el-aside :width="aside_width">
                <el-col>
                    <h4>{{ isBool ? '管理' : '管理系统' }}</h4>
                    <el-menu :collapse="isBool">
                        <el-menu-item index="1" @click="changepage('首页')"
                            :style="{ color: $route.name == 'homepage' ? '#08ffc8' : '#909399' }">
                            <i class="el-icon-menu" :style="{ color: $route.name == 'homepage' ? '#08ffc8' : '#909399' }"></i>
                            <span slot="title">首页</span>
                        </el-menu-item>
                        <el-menu-item index="2" @click="changepage('商品管理')"
                            :style="{ color: $route.name == 'shop' ? '#08ffc8' : '#909399' }">
                            <i class="el-icon-document" :style="{ color: $route.name == 'shop' ? '#08ffc8' : '#909399' }"></i>
                            <span slot="title">商品管理</span>
                        </el-menu-item>
                        <el-menu-item index="3" @click="changepage('用户管理')"
                            :style="{ color: $route.name == 'user' ? '#08ffc8' : '#909399' }">
                            <i class="el-icon-setting" :style="{ color: $route.name == 'user' ? '#08ffc8' : '#909399' }"></i>
                            <span slot="title">用户管理</span>
                        </el-menu-item>
                        <el-menu-item index="4" class="rests" @click="changepage('个人中心')"
                            :style="{ color: $route.name == 'PersonalCenter' ? '#08ffc8' : '#909399' }">
                            <i class="el-icon-location" :style="{ color: $route.name == 'PersonalCenter' ? '#08ffc8' : '#909399' }"></i>
                            <span slot="title">个人中心</span>
                        </el-menu-item>
                    </el-menu>
                </el-col>
            </el-aside>
            <el-container>
                <!-- 头部 -->
                <el-header>
                    <ul class="el-menu-demo">
                        <li>
                            <div @click="ck"><i class="el-icon-menu"></i></div>
                        </li>
                        <h4><span v-for="(item, index) in list" :key="index"
                                :class="fristpage == item ? 'fontcolor1' : 'fontcolor2'" @click="changepage(item)">{{
                                    item }}<span id="wo">/</span>&nbsp;&nbsp;&nbsp;</span></h4>
                    </ul>

                    <div>
                        <el-popover placement="bottom" width="50" trigger="click" popper-class="bottom-popper">
                            <button @click="persoalCenter">个人中心</button>
                            <button @click="logout">退出登录</button>
                            <el-button slot="reference">
                                <div class="pohto">
                                    <img src="../img/QQ图片20230403163144.jpg" alt="">
                                </div>
                            </el-button>
                        </el-popover>
                    </div>
                </el-header>
                <!-- 各组件的内容 -->
                <el-main>
                    <button v-for="(item, index) in mainlist" :key="index" @click="changepage(item)"
                        :class="fristpage == item ? 'two' : 'one'"><span>{{
                            item }}</span>
                        &nbsp;<span @click="dalete(index)"><i class="el-icon-close" v-if="index != 0"></i></span>
                    </button>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
            aside_width: "180px",
            isBool: false,
            list: ['首页'],
            fristpage: '首页',
            mainlist: ['首页'],
        }
    },
    //计算属性
    computed: {
        // isBool
    },
    //监听
    watch: {

    },
    //方法
    methods: {
        // 侧边栏折叠
        ck() {
            this.isBool = !this.isBool
            this.isBool ? this.aside_width = "65px" : this.aside_width = "180px"
        },
        // 切换头部标题
        changepage(val) {
            if (val == '首页') {
                // 跳转页面
                this.$router.push({ name: 'homepage' })
                this.fristpage = '首页'
            } else if (val == '用户管理') {
                this.$router.push({ name: 'user' })
                this.fristpage = '用户管理'
                if (this.list.includes('用户管理')) return
                this.list.push('用户管理')
                this.mainlist.push('用户管理')
            } else if (val == '商品管理') {
                this.$router.push({ name: 'shop' })
                this.fristpage = '商品管理'
                if (this.list.includes('商品管理')) return
                this.list.push('商品管理')
                this.mainlist.push('商品管理')
            } else if (val == '个人中心') {
                this.$router.push({ name: 'PersonalCenter' })
                this.fristpage = '个人中心'
                if (this.list.includes('个人中心')) return
                this.list.push('个人中心')
                this.mainlist.push('个人中心')
            }
            // 强制页面刷新
            this.$forceUpdate()
        },
        // 跳回首页
        onepage() {
            this.$router.push({ name: 'homepage' })
            // 强制页面刷新
            this.$forceUpdate()
        },
        // 删除小标题
        dalete(index) {
            this.mainlist.splice(index, 1)
            if (this.list.length !== 1) {
                this.list.splice(index, 1)
                if (this.mainlist == '') {
                    this.$router.push({ name: 'homepage' })
                }
            }
            // 强制页面刷新
            this.$forceUpdate()
        },
        // 退出登录
        logout() {
            // 清空本地存储的登录所用的数据
            localStorage.removeItem('用户名');
            localStorage.removeItem('密码');
            // 跳转到登录页面
            this.$router.push({ name: 'login' })
            this.$message({
                message: '退出成功',
                type: 'success'
            });
            // 强制页面刷新
            this.$forceUpdate()
        },
        //个人中心
        persoalCenter() {
            // 跳转到个人中心
            this.$router.push({ name: 'PersonalCenter' })
            this.fristpage = '个人中心'
            if (this.list.includes('个人中心')) return
            this.list.push('个人中心')
            this.mainlist.push('个人中心')
            // 强制页面刷新
            this.$forceUpdate()
        }
    },
    //组件
    components: {
    },
    // 生命周期
    mounted() {

    },
    created() {
        this.$router.push({name:'homepage'})
    },
}
</script>

<style lang="less">
.el-submenu .el-menu-item {
    min-width: 180px;
}

.bottom-popper {
    min-width: 70px;
    min-height: 30px;
}
</style>
<style lang="less" scoped>
/deep/.elcontainer {
    height: calc(100vh - 20px);
}

.el-popover {
    min-width: 20px;
    min-height: 40px;

    button {
        line-height: 30px;
        height: 25px;
        margin: auto;
        border: 0;
        background-color: white;
        display: flex;
        flex-direction: column;
        margin-top: 10px;
    }

    button:hover {
        color: rgb(109, 141, 230);
        background-color: rgba(109, 141, 230, 0.363);
    }
}

.el-header {
    background-color: #08ffc8;
    color: #333;
    // text-align: center;
    height: calc(100vh - 20px);
    display: flex;
    justify-content: space-between;

    .el-button {
        margin: 5px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        // overflow: hidden;
    }



    .pohto {
        position: absolute;
        top: 5px;
        right: 25px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
        }
    }

    ul {
        font-size: 13px;
        font-weight: 700;
        color: black;
        list-style: none;
        display: flex;
        justify-content: space-between;
        line-height: 60px;

        h4 {
            margin-left: 20px;
            letter-spacing: 5px;
            cursor: pointer;
        }

        #wo {
            color: #6b778d;
        }

        div {
            background-color: white;
            width: 50px;
            height: 35px;
            outline: 1px solid rgb(197, 188, 188);
            margin-top: 12px;
            display: flex;
            flex-direction: row;
            align-items: center;
            border-radius: 5px;

            .el-icon-menu {
                color: #525252;
                padding: 17px;
                font-size: 15px;
            }
        }

        div:hover {
            outline: 1px solid rgb(86, 115, 196);

            .el-icon-menu {
                color: rgb(86, 115, 196);
            }
        }
    }
}

.el-footer {
    background-color: #525252;
    color: #333;
    text-align: center;
    height: calc(100vh - 20px);
}

.el-aside {
    transition: all 0.25s;
    background-color: #6b778d;
    color: #333;
    text-align: center;
    height: 100vh;
    .rests:hover {

        span,
        i {
            color: #07dbad;
        }
    }

    h4 {
        color: rgb(255, 255, 255);
        font-weight: 400;
        margin-top: 20px;
    }

    .el-menu {
        background-color: #6b778d;
        border: 0;
        text-align: left;
        .el-menu-item:hover {
            span,
            i {
                color: #07dbad;
            }

            .template {

                span,
                i {
                    color: #08ffc8;
                }
            }
        }
    }
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    height: calc(100vh - 60px);

    .one {
        cursor: pointer;
        background-color: white;
        border: 0;
        min-width: 45px;
        height: 25px;
        border-radius: 2px;
        margin-left: 10px;
        outline: 1px solid rgb(109, 141, 230);
        color: rgb(109, 141, 230);
    }

    .two {
        cursor: pointer;
        min-width: 45px;
        max-width: 80px;
        height: 25px;
        background-color: rgb(109, 141, 230);
        border-radius: 2px;
        color: white;
        border: 0;
        outline: 1px solid rgb(109, 141, 230);
        margin-left: 10px;
        font-size: 12px;
    }
}

.fontcolor1 {
    color: black;
}

.fontcolor2 {
    color: #818080ab;
}

/* .asidecolor {
    color: #08ffc8;
} */
</style>